<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    *{margin: 0;padding: 0;}
    .div1{
        width: 450px;
        height: 300px;
        overflow: hidden;
        display: inline-block;
    }
    .div1>img{width: 100%;}
    .div2{
        width: 450px;
        height: 300px;
        border: 1px solid #A9A9A9;
        overflow: hidden;
        display: inline-block;
        position: relative;
    }
    .div2>img{
        position: absolute;
        width: 200%;
        height: 200%;
    }
    .list1{
        width: 70px;
        height: 50px;
        float: left;
        margin-left: 10px;
    }
    .list1>img{width: 100%;}
    #zhezhao{
        width: 100px;
        height: 100px;
        background: #BC8F8F;
        opacity: 0.7;
        display: none;
        position: absolute;
    }
</style>
<body>
    <div class="div1">
        <img src="./img/163152-149397311229e7.jpg" alt="" class="img1" />
        <div id="zhezhao"></div>
    </div>
    <div class="div2"></div>
    <div class="list">
        <div class="list1">
            <img src="./img/214648-16157296085fc8.jpg" alt="" class="listimg1" />
        </div>    
        <div class="list1">
            <img src="./img/220410-16157306509333.jpg" alt="" class="listimg2" />
        </div>    
        <div class="list1">
            <img src="./img/432444.webp" alt="" class="listimg3" />
        </div>    
        <div class="list1">
            <img src="./img/t015801989cf57f46ea.jpg" alt="" class="listimg4" />
        </div>    
        <div class="list1">
            <img src="./img/t01696b121dc8c3a1b7.jpg" alt="" class="listimg5" />
        </div>
    </div>
     


</body>
<script>
    $(function(){
        $('.list1').mouseover(function(){
        //           鼠标悬停  函数
            $('.div1').children()[0].src = $(this).children()[0].src;
        //                                    这 
        });
        $('.div1').mousemove(function(e){                    
            $('#zhezhao').css({
                left: e.clientX-50+'px',
                top: e.clientY-50+'px',
                display: 'block'
            });
            var $img = $('.div1').children().eq(0);
            $('.div2').empty();
            $('.div2').append($img.clone());
            $('.img1').css({
                    left: -(e.clientX-50)*2+'px',
                    top: -(e.clientY-50)*2+'px'
                });
            if(50>e.clientX||e.clientX>450||50>e.clientY||e.clientY>300) {
                $('#zhezhao').css({
                    display: 'none'
                });
            }else{
                $('#zhezhao').css({
                    left: e.clientX-50+'px',
                    top: e.clientY-50+'px',
                    display: 'block'
                });
            }
        });
    });
</script>
</html>